<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-4.4.1/css/bootstrap.min.css">

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<button class="btn btn-primary" onclick="gotoAdd()">新增</button>
<table class="table table-bordered table-hover">
    <thead class="thead-light">
    <tr>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody id="tbody">

    </tbody>
</table>

</body>
</html>

<script>
    function gotoAdd() {
        window.location.href = "edit.html";
    }
    function gotoEdit(id) {
        window.location.href = "edit.html?id=" + id;
    }
    function del(id) {
        $.ajax({
            url: "http://localhost:8080/user/delete/" + id,
            method: "delete",
            success: function (data) {
                if (data.code == 0) {
                    alert("删除成功！");
                    window.location.href = "list.html";
                }
            }
        })

    }
    $(function () {
        $.ajax({
            url: 'http://localhost:8080/user/list',
            method: 'get',
            success: function (data) {
                if (data.code == 0) {
                    var userList = data.data;
                    var str = "";
                    $("#tbody").empty();
                    $(userList).each(function (index, val) {
                        str += "<tr>" +
                            "<td>" + val.id + "</td>" +
                            "<td>" + val.userName + "</td>" +
                            "<td>" + val.password + "</td>" +
                            "<td><button class='btn btn-primary' onclick='gotoEdit("+val.id+")'>修改</button>" +
                            "<button class='btn btn-danger' onclick='del("+val.id+")'>删除</button></td>" +
                            "</tr>"
                    });
                    $("#tbody").append(str);
                }
            }
        })
    })
</script>